<script setup>
import { computed, ref } from 'vue';

const age = ref(20);
// ✨✨工作中用的最多的写法
const nextAge = computed(() => {
  // 不要手快写成了 age.value++,那么就把今年的年龄也改变了
  return age.value + 1;
});

// computed 可以由 set/get 钩子函数组成,建议配套出现
// 场景：用于依赖别人的数据，也能实现自身数据改变时，别人跟着改变
const nextAge2 = computed({
  get() {
    return age.value + 2;
  },
  set(value) {
    age.value = value - 2;
  },
});
</script>

<template>
  <div>
    <div>今年的年龄： <input type="text" v-model.number="age" /></div>
    <div>明年的年龄： {{ nextAge }}</div>
    <div>后年的年龄： <input type="text" v-model.number="nextAge2" /></div>
  </div>
</template>
